<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    .box-card {
        margin: 240px auto 0 auto;
        width: 480px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<body>

<div id="app">
    <el-card class="box-card">
        <el-form :model="userForm" status-icon :rules="rules" ref="userFrom" label-width="100px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="uname">
                <el-input type="username" v-model="userForm.uname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="checkPass">
                <el-input type="password" v-model="userForm.pwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <h2>头像</h2>
                <el-upload
                    name="head"
                    action
                    class="avatar-uploader"
                    :show-file-list="false"
                    :auto-upload="false"
                    :on-change="handleAvatar"
                    :http-request="uploadPicture">
                <img v-if="userForm.head" :src="userForm.head" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            </el-form-item>
            <el-form-item>
                <h2>照片</h2>
                <el-upload
                    name="lifes"
                    action
                    class="upload-demo"
                    list-type="picture"
                    :before-upload="beforeUploadPicture"
                    :on-remove="handleRemove"
                    :file-list="userForm.lifes"
                    :show-file-list="true"
                    :auto-upload="false"
                    :on-change="handlePicture"
                    multiple>
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('userForm')">提交</el-button>
                <el-button @click="resetForm('userForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    </div>
</el-card>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            let checkUname = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('用户名不能为空'));
                }
            };
            let validatePass = (rule, value, callback) => {
                if (value === '') {
                    return callback(new Error('请输入密码'));
                }
            };
            return {
                userForm: {
                    uname: '',
                    pwd: '',
                    head: '',
                    lifes: []
                },
                headImgFile: null,
                lifesImgFile: null,
                rules: {
                    uname: [
                        {validator: checkUname, trigger: 'blur'}
                    ],
                    pwd: [
                        {validator: validatePass, trigger: 'blur'}
                    ]
                },
                headers: { "Content-Type": "multipart/form-data" },
            };
        },
        methods: {
            submitForm() {
                this.register()
                this.uploadPicture()
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleAvatar(file, fileList) {
                this.headImgFile = file
                this.userForm.head = URL.createObjectURL(this.headImgFile.raw);
            },
            handlePicture(file, fileList) {
                this.userForm.lifes.push(URL.createObjectURL(file.raw))
                this.lifesImgFile = fileList;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 10;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 10MB!');
                }
                return isJPG && isLt2M;
            },
            handleRemove(file, fileList) {
                this.removeElement(this.userForm.lifes, URL.createObjectURL(file.raw))
                this.lifesImgFile = fileList;
            },
            handlePreview(file) {
                console.log(file);
            },
            beforeUploadPicture(file){
                console.log('beforeUploadPicture' + file.name)
            },
            removeElement(arr, item) {
                return arr.filter(function(i){
                    return i!=item;
                })
            },
            register(){
                var params = new URLSearchParams();
                params.append('uname', this.userForm.uname);
                params.append('pwd', this.userForm.pwd);
                params.append('head', this.userForm.head);
                params.append('lifes', this.userForm.lifes);
                axios.post('/register', params).then(res => {
                    if (res.data.code == 1) {
                        this.$message({
                            message: '注册成功',
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: '注册失败',
                            type: 'error'
                        });
                    }
                })
            },
            //上传文件的事件
            async uploadPicture(){
                this.$message('文件上传中........');
                //上传文件的需要formdata类型;所以要转
                let FormDatas = new FormData()
                FormDatas.append('head', this.headImgFile.raw)
                this.lifesImgFile.forEach(item => {
                    FormDatas.append('file', item.raw)
                })
                axios.post('upload',FormDatas).then(res=>{
                    if (res.data.code == 1) {
                        this.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                    } else {
                        this.$message({
                            message: '上传失败',
                            type: 'error'
                        })
                    }
                })
            },

        }
    })
</script>
</html>